<template>
  <x-skeleton class="container">
    <view class="address flex" @click="onAddress">
      <view class="_lf">
        <view class="_img">
          <x-icon v-if="addressInfo" name="icon-021" size="31" color="#999999"></x-icon>
          <x-image v-else :src="GoodsShareWechat"/>
        </view>
      </view>
      <view class="flex1" style="margin-right: 25px;">
        <view v-if="addressInfo">
          <view class="flex _user-info align-center">
            <text class="flex1">{{ addressInfo.username }}</text>
            <text class="_text">{{ addressInfo.phoneNum }}</text>
          </view>
          <view class="address-info">
            {{ addressInfo.useProvince }}{{ addressInfo.userCity }}{{ addressInfo.userArea }}{{
              addressInfo.userAddress
            }}
          </view>
        </view>
        <text v-else class="add-address">添加微信地址</text>
      </view>
      <view>
        <x-icon name="icon-017" size="26" color="#999999"></x-icon>
      </view>
    </view>
    <view style="height: 2px">
      <x-image :src="CommonAddress"/>
    </view>
    <view class="order-goods-list">
      <view class="x-order-goods">
        <view class="_pic">
          <x-image :src="skuInfo.skuImgUrl ? skuInfo.skuImgUrl : skuInfo.mainImgUrl"/>
        </view>
        <view class="_info">
          <view class="_title">{{ skuInfo.goodsName }}</view>
          <view class="_desc">
            <view class="_sku">
              <text>{{ skuInfo.skuSpec }}</text>
            </view>
          </view>
          <view class="_bottom">
            <view class="_red flex1">
              <text class="_text">¥</text>
              <text class="_text-blod">{{ formatPrice(skuInfo.skuPrice) }}</text>
            </view>
            <view class="_num">
              <view class="_rt">
                <view class="_jian">
                  <x-button @click="changeSkuNum(skuNum - 1)" :disabled="skuNum <= 1" priority="secondary-secondary"
                            size="medium" styles="border: none !important;background: #F2F3F5;padding: 0">
                    <text style="font-size: 28px;line-height: 28px;">-</text>
                  </x-button>
                </view>
                <view class="_num">
                  <x-input placeholder=" " disabled :value.sync="skuNum" type="text" size="small" textAlign="center"
                           background="#F2F3F5"/>
                </view>
                <view class="_jian">
                  <x-button @click="changeSkuNum(skuNum + 1)" priority="secondary-secondary" size="medium"
                            styles="border: none !important;background: #F2F3F5;padding: 0">
                    <text style="font-size: 28px;line-height: 28px;">+</text>
                  </x-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="_discount-info">
      <view class="_title">
        <text class="flex1">商品总额</text>
        <text>¥{{ totalPrice }}</text>
      </view>
      <view class="_title">
        <text class="flex1">运费</text>
        <text class="_red">{{ '免运费' }}</text>
      </view>
    </view>
    <view class="_total">
      总计
      <text style="margin-left: 2px;">
        <text class="_red font-24 _blod">¥</text>
        <text class="_red font-32 _blod">{{ totalPrice }}</text>
      </text>
    </view>
    <view class="cell-group">
      <view class="cell">
        <view class="_lf-title">留言</view>
        <view class="flex1">
          <x-input size="mini" :value="orderMessage" :clear="true" placeholder="选填：对快递等的特殊要求"/>
        </view>
      </view>
    </view>
    <view class="_pay">
      <radio-group @change="onPayTypeChange">
        <label class="pay-type-wrapper">
          <view class="pay-type-box flex1">
            <text class="_tips">积分支付</text>
          </view>
          <view>
            <radio value="1" checked="true" color="#DE3A2E" style="transform: scale(0.7);"/>
          </view>
        </label>
        <label class="pay-type-wrapper">
          <view class="pay-type-box flex1">
            <text class="_tips">微信支付</text>
          </view>
          <view>
            <radio value="1" color="#DE3A2E" style="transform: scale(0.7);"/>
          </view>
        </label>
      </radio-group>
    </view>
    <x-fixed ref="x-fixed-bottom" fixed direction="bottom">
      <view class="bottom">
        <view class="pay-real">
          <x-icon class="icon" color="#07C160" name="icon-032" size="36"/>
          <text>实付款：</text>
          <view style="align-items: baseline;">
            <text class="_red font-24 _blod">¥</text>
            <text class="_red font-36 _blod">{{ totalPrice }}</text>
          </view>
        </view>
        <view class="pay-btn" @click="submitOrder">
          立即支付
        </view>
      </view>
    </x-fixed>
    <x-pay v-if="payVisible" :visible.sync="payVisible" :order-id="orderId" @close="closePayVisible"/>
    <div v-html="html" ref="payForm"></div>
  </x-skeleton>
</template>

<script setup>
import {computed, nextTick, ref} from "vue";
import XIcon from '@/components/x-icon.vue'
import XImage from '@/components/x-image.vue'
import XFixed from '@/components/x-fixed.vue'
import XInput from '@/components/x-input.vue'
import XButton from "@/components/x-button.vue";
import XPay from '@/components/x-pay.vue'
import GoodsShareWechat from '@/assets/images/goods-share-wechat.png'
import CommonAddress from '@/assets/images/common-address.png'
import {onLoad} from "@dcloudio/uni-app";
import {reqSkuDetail, reqSubmitOrder} from "@/api";
import {formatPrice} from "@/utils/util";
import XSkeleton from "@/components/x-skeleton.vue";

const addressInfo = ref({
  username: "测试11",
  phoneNum: 18068323376,
  useProvince: "河南省",
  userCity: "信阳市",
  userArea: "光山县",
  userAddress: "何畈村赵畈",
})
const skuInfo = ref({
  mainImgUrl: "",
})
const skuNum = ref(1)
const totalPrice = computed(() => formatPrice(skuInfo.value.skuPrice * skuNum.value))
const payVisible = ref(false)
const orderMessage = ref("")
const orderId = ref(null);

const html = ref("")
const payForm = ref(null)

function changeSkuNum(num) {
  if (num >= 1) {
    skuNum.value = num
  }
}

function onAddress() {

}

function onPayTypeChange() {

}

function closePayVisible() {
  payVisible.value = false
}

async function submitOrder() {
  const token = uni.getStorageSync("TOKEN")
  if (!token) {
    await uni.navigateTo({url: '/pages/login'})
    return
  }
  const res = (await reqSubmitOrder({
    goodsInfo: {
      goodsId: skuInfo.value.goodsId,
      skuId: skuInfo.value.skuId,
      num: skuNum.value
    },
    addressInfo: {
      username: addressInfo.value.username,
      phoneNum: addressInfo.value.phoneNum,
      userProvince: addressInfo.value.useProvince,
      userCity: addressInfo.value.userCity,
      userArea: addressInfo.value.userArea,
      userAddress: addressInfo.value.userAddress
    },
    paymentType: "ali"
  })).data
  orderId.value = res.orderId
  // payVisible.value = true
  html.value = res.content
  await nextTick(() => {
    console.log(payForm)
    payForm.value.childNodes[0].submit()
  })
}

async function getSkuDetail(goodsId, skuId) {
  skuInfo.value = (await reqSkuDetail({
    goodsId, skuId
  })).data
}

onLoad((options) => {
  getSkuDetail(options.goodsId, options.skuId)
  skuNum.value = Number(options.num)
})
</script>

<style scoped lang="scss">
.container {
  background-color: #eeeeee;

  .address {
    min-height: 120rpx;
    padding: 24rpx;
    background: #FFFFFF;
    align-items: center;

    ._lf {
      margin-right: 12rpx;

      ._img {
        width: 36rpx;
        height: 36rpx;
      }
    }

    ._user-info {
      font-size: 32rpx;
      color: $uni-color-default;
      font-weight: bold;
      margin-bottom: 12rpx;

      ._text {
        font-size: 28rpx;
      }
    }

    .add-address {
      font-size: 28rpx;
      color: $uni-color-default;
    }

    .address-info {
      font-size: 28rpx;
      color: $uni-color-info;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: justify;
    }
  }

  .order-goods-list {
    margin: 16rpx 0;

    .x-order-goods {
      display: flex;
      padding: 16rpx 24rpx;
      border-bottom: 1rpx solid #F7F8FA;
      background: #FFFFFF;

      ._pic {
        width: 180rpx;
        height: 180rpx;
        border: 1rpx solid #EDEDED;
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;
      }

      ._info {
        flex: 1;
        padding-left: 12rpx;
        position: relative;

        ._title {
          font-size: 28rpx;
          color: $uni-color-default;
          overflow: hidden;
          height: 40rpx;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        ._desc {
          display: flex;
          align-items: center;
          margin-bottom: 6rpx;
          font-size: 24rpx;
          color: #A3A3A3;

          ._sku {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        ._tips {
          display: inline-block;
          min-width: 100rpx;
          height: 32rpx;
          line-height: 32rpx;
          background: rgba(235, 68, 31, 0.1);
          font-size: 20rpx;
          color: $uni-color-primary;
          text-align: center;
          padding: 0 8rpx;
          margin-right: 8rpx;
        }

        ._text {
          font-size: 24rpx;
        }

        ._text-blod {
          font-size: 32rpx;
          font-weight: bold;
        }

        ._bottom {
          position: absolute;
          bottom: 0;
          display: flex;
          align-items: baseline;
          width: 100%;

          ._num {
            display: flex;
            align-items: center;

            ._rt {
              display: flex;

              ._num {
                width: 72rpx;
                height: 64rpx;
                background: #F2F3F5;
                margin: 0 4rpx;
              }

              ._jian {
                width: 64rpx;
                height: 64rpx;
              }
            }
          }
        }
      }
    }
  }

  ._discount-info {
    background: #FFFFFF;
    padding: 0rpx 24rpx;
    border-bottom: 1rpx solid #EBEDF0;

    ._title {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: $uni-color-default;
    }

    ._title:first-child {
      padding-top: 40rpx;
    }

    ._title:last-child {
      padding-bottom: 40rpx;
    }
  }

  ._total {
    padding: 26rpx 26rpx;
    background: #FFFFFF;
    font-size: 28rpx;
    color: $uni-color-secondary;
    text-align: right;
  }

  .cell-group {
    margin-top: 16rpx;
    background: #FFFFFF;

    .cell {
      display: flex;
      align-items: center;
      padding: 30rpx 24rpx;
      border-bottom: 1rpx solid $uni-page-bg;

      ._lf-title {
        font-size: 28rpx;
        color: $uni-color-default;
        margin-right: 28rpx;
      }

      .adress-info {
        font-size: 28rpx;
      }
    }

    .cell:last-child {
      border-bottom: none;
    }
  }

  ._pay {
    background: #FFFFFF;
    margin-top: 16rpx;

    .pay-type-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 24rpx;

      .pay-type-box {
        display: flex;
        align-items: center;

        .icon {
          margin-right: 10rpx;
        }

        ._tips {
          font-size: 28rpx;
          color: $uni-color-default;
        }
      }
    }
  }

  .bottom {
    display: flex;
    margin-bottom: env(safe-userArea-inset-bottom);

    .pay-real {
      display: flex;
      align-items: center;
      flex: 1;
      padding-left: 72rpx;
      display: flex;
      font-size: 28rpx;
      color: $uni-color-secondary;

      .icon {
        margin-right: 12rpx;
      }
    }

    .pay-btn {
      width: 320rpx;
      line-height: 110rpx;
      text-align: center;
      background: $uni-color-primary;
      color: #FFFFFF;
    }
  }
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

._red {
  color: $uni-color-primary;
}

.font-24 {
  font-size: 24rpx;
}

.font-32 {
  font-size: 32rpx;
}

.font-36 {
  font-size: 36rpx;
}
</style>
